<template>
    <!-- 应用整体布局容器 -->
    <el-container>
        <!-- 侧边菜单栏组件 -->
        <SideMenu/>
        <!-- 垂直方向布局容器（包含头部和主要内容） -->
        <el-container direction="vertical">
            <!-- 顶部导航栏组件 -->
            <TopHeader/>
            <!-- 主要内容区域 -->
            <el-main>
                <!-- 路由视图：动态渲染匹配的组件 -->
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script setup>
// 导入顶部导航栏组件
import TopHeader from '../components/mainbox/TopHeader.vue'
// 导入侧边菜单栏组件
import SideMenu from '../components/mainbox/SideMenu.vue'
</script>

<style lang="scss" scoped>
// 主要内容区域样式
.el-main{
    overflow: auto;                // 内容溢出时显示滚动条
    height: calc(100vh - 60px);    // 高度占满视口剩余空间（减去头部60px高度）
}
</style>